<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <title>验证码</title>
  <style>
    #inputCaptcha {
      height: 30px;
      vertical-align: middle;
    }

    #verificationCodeImg {
      vertical-align: middle;
    }

    #checkCaptcha {
      height: 40px;
      width: 100px;
    }
  </style>
</head>

<body>
  <h1>输入验证码</h1>
  <div id="confirm">
    <input type="text" name="inputCaptcha" id="inputCaptcha">
    <img id="verificationCodeImg" src="/admin/captcha" style="cursor: pointer;" title="看不清？换一张" />
    <input type="button" value="提交" id="checkCaptcha">
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script>
    $(function () {
      $("#verificationCodeImg").click(function () {
        $(this).hide().attr('src', '/admin/captcha?dt=' + new Date().getTime()).fadeIn();
        // $(this).attr('src', '/admin/captcha?dt=' + new Date().getTime());
      });

      $("#checkCaptcha").click(function () {
        $.ajax({
          type: "get",
          url: "/admin/check",
          data: {
            captcha: $("#inputCaptcha").val()
          },
          success: function (result) {
            if (result) {
              location.href = "success.html";
              // location.assign("success.html");
            } else {
              alert("验证码错误");
            }
          }
        });
      });
    });


  </script>
</body>

</html>